<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/5/9 21:56
 -->
<template>
  <el-drawer title="设置" :visible.sync="_settingVisible" append-to-body size="320px" class="g-drawer--setting">
    <el-divider content-position="left">布局</el-divider>
    <div class="layout-img__wrap">
      <!--经典默认布局-->
      <el-tooltip v-if="layoutTemplates.includes('default')" content="默认布局" placement="top">
        <div
          :class="[
            'layout__img-item',
            'img-horizontal-vertical',
            'layout--default',
            _layout == 'default' ? 'layout__img-item--active' : ''
          ]"
          @click.stop="onChangeLayout('default')"
        >
          <div>
            <div></div>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div>
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </el-tooltip>

      <!--水平-->
      <el-tooltip v-if="layoutTemplates.includes('horizontal')" content="左右布局" placement="top">
        <div
          :class="['layout__img-item', 'img-horizontal', _layout == 'horizontal' ? 'layout__img-item--active' : '']"
          @click.stop="onChangeLayout('horizontal')"
        >
          <div></div>
          <div></div>
        </div>
      </el-tooltip>

      <!--垂直-->
      <el-tooltip v-if="layoutTemplates.includes('vertical')" content="上下布局" placement="top">
        <div
          :class="['layout__img-item', 'img-vertical', _layout == 'vertical' ? 'layout__img-item--active' : '']"
          @click.stop="onChangeLayout('vertical')"
        >
          <div></div>
          <div></div>
        </div>
      </el-tooltip>
      <!--水平 + 垂直-->
      <el-tooltip v-if="layoutTemplates.includes('horizontal-vertical')" content="左右+上下布局" placement="top">
        <div
          :class="[
            'layout__img-item',
            'img-horizontal-vertical',
            _layout == 'horizontal-vertical' ? 'layout__img-item--active' : ''
          ]"
          @click.stop="onChangeLayout('horizontal-vertical')"
        >
          <div></div>
          <div></div>
        </div>
      </el-tooltip>

      <!--曼荼罗-->
      <el-tooltip v-if="layoutTemplates.includes('mandala')" content="曼荼罗经典布局" placement="top">
        <div
          :class="[
            'layout__img-item',
            'img-horizontal-vertical',
            'layout--mandala',
            _layout == 'mandala' ? 'layout__img-item--active' : ''
          ]"
          @click.stop="onChangeLayout('mandala')"
        >
          <div>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div>
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </el-tooltip>
    </div>

    <!--主题色-->
    <el-divider content-position="left">主题色</el-divider>
    <section class="theme-color__wrap">
      <el-tooltip
        v-for="item in themePrimary"
        :key="item.value"
        :content="`${item.label}${item.value == defaultSetting.primaryColor ? '（默认）' : ''}`"
        placement="top"
      >
        <div
          :class="{ 'theme-color-item': true, 'theme-color-item--active': _primaryColor === item.value }"
          :style="{ background: item.value }"
          @click.stop="onChangePrimaryColor(item.value)"
        ></div>
      </el-tooltip>
      <el-tooltip content="其他主题色" placement="top">
        <el-color-picker v-model="_primaryColor" :predefine="predefineColors"></el-color-picker>
      </el-tooltip>
    </section>

    <!--菜单风格-->
    <template v-if="['horizontal', 'vertical', 'horizontal-vertical'].includes(_layout)">
      <el-divider content-position="left">菜单配色</el-divider>
      <section class="menu-style__wrap">
        <el-radio-group v-model="_theme" style="width: 100%">
          <el-radio-button v-for="item in menusStyle" :key="item.value" :label="item.value">{{
            item.label
          }}</el-radio-button>
        </el-radio-group>
      </section>
    </template>

    <!--其他设置-->
    <el-divider content-position="left">其他设置</el-divider>
    <section class="other-setting__wrap" style="padding-bottom: 20px">
      <div class="setting__item">
        <span>多页签模式</span>
        <el-switch v-model="_navShow"> </el-switch>
      </div>

      <div class="setting__item">
        <span>标签页拖动</span>
        <el-switch v-model="_navDraggable"> </el-switch>
      </div>

      <div class="setting__item">
        <span>色弱模式</span>
        <el-switch v-model="_weekMode"> </el-switch>
      </div>

      <div class="setting__item">
        <span>面包屑</span>
        <el-switch v-model="_breadcrumbShow"> </el-switch>
      </div>

      <div class="setting__item">
        <span>菜单</span>
        <el-switch v-model="_menuShow"> </el-switch>
      </div>

      <div class="setting__item">
        <span>头部</span>
        <el-switch v-model="_headerShow"> </el-switch>
      </div>
    </section>

    <!--页面切换动画 -->
    <el-divider content-position="left">页面切换动画</el-divider>
    <div class="setting__item">
      <span>启用动画</span>
      <el-switch v-model="_transitionEnable" @change="onChangeTransition"></el-switch>
    </div>

    <div v-if="_transitionEnable" class="setting__item">
      <span>动画效果</span>
      <el-select v-model="_transitionName" placeholder="请选择" style="width: 80px" @change="onChangeTransition">
        <el-option
          v-for="(item, index) in transitionOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>

    <el-divider></el-divider>
    <div class="reset__wrap">
      <el-button type="primary" @click.stop="onResetSetting">重置设置</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { sync } from 'vuex-pathify'
import defaultSetting from '@/setting'

export default {
  computed: {
    _settingVisible: sync('app/settingVisible'),
    _layout: sync('app/layout'),
    _theme: sync('app/theme'),
    _headerShow: sync('app/headerShow'),
    _menuShow: sync('app/menuShow'),
    _navShow: sync('app/navShow'),
    _primaryColor: sync('app/primaryColor'),
    _breadcrumbShow: sync('app/breadcrumbShow'),
    _transitionName: sync('app/transitionName'),
    _transitionEnable: sync('app/transitionEnable'),
    _weekMode: sync('app/weekMode'),
    _navDraggable: sync('app/navDraggable')
  },

  data() {
    return {
      defaultSetting,
      layoutTemplates: ['default', 'horizontal', 'vertical', 'horizontal-vertical', 'mandala'],
      menusStyle: [
        { value: 'white', label: '简约' },
        { value: 'black', label: '专业' },
        { value: 'black-and-white', label: '混合' }
      ],
      transitionOptions: [
        { value: 'fade-transform', label: '渐进' },
        { value: 'slide-transform', label: '滑动' }
      ],
      themePrimary: [
        {
          label: '极客蓝',
          value: '#2F54EB'
        },
        {
          label: '薄暮',
          value: '#F5222D'
        },
        {
          label: '火山',
          value: '#FA541C'
        },
        {
          label: '日暮',
          value: '#FAAD14'
        },
        {
          label: '明青',
          value: '#009688'
        },
        {
          label: '拂晓蓝',
          value: '#0081e4'
        },
        {
          label: '极光绿',
          value: '#52C41A'
        },
        {
          label: '酱紫',
          value: '#722ED1'
        }
      ],
      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', '#c7158577']
    }
  },

  mounted() {},

  methods: {
    /* 改变布局*/
    onChangeLayout(layout) {
      this._layout = layout
      // setTimeout(() => {
      //   this._primaryColor = defaultSetting.primaryColor
      // }, 20)
    },

    /* 改变饿了么主色颜色*/
    onChangePrimaryColor(color) {
      this._primaryColor = color
    },

    /* 改变页面过度动画*/
    onChangeTransition() {
      this.$nextTick(() => {
        if (!this.$baseEventBus) return window.location.reload()
        this.$baseEventBus.$emit('reload-router-view')
      })
    },

    /* 重置基础设置*/
    onResetSetting() {
      this._layout = defaultSetting.layout
      this._theme = defaultSetting.theme
      this._headerShow = defaultSetting.headerShow
      this._menuShow = defaultSetting.menuShow
      this._navShow = defaultSetting.navShow
      this._primaryColor = defaultSetting.primaryColor
      this._breadcrumbShow = defaultSetting.breadcrumbShow
      this._transitionEnable = defaultSetting.transitionEnable
      this._transitionName = defaultSetting.transitionName
      this._weekMode = defaultSetting.weekMode
      this.$nextTick(() => {
        this.$message.success('基础设置重置成功')
      })
    }
  }
}
</script>

<style lang="scss">
@import './index';
</style>
